<template>
  <div class="shoesDetail">
    <el-card class="shoesCard">
      <div class="detalTop">
        <img :src="shoes.shoesImage" class="image" />
        <div>
          <div>
            <h3>{{shoes.shoesName}}</h3>
          </div>
          <div style="font-size:14px;margin-top:10px;">
            价格：
            <b style="color: #f40;font-size:20px;">{{shoes.shoesPrice}}</b>
          </div>
          <div style="margin-top:140px;">
            <el-button type="danger" @click="addToShopcart()">
              <i class="el-icon-shopping-cart-2"></i> 加入购物车
            </el-button>
          </div>
        </div>
      </div>
      <div class="shoesDis">
        <span style="color:#6c6c6c;font-size:14px;">累计评论</span>
        <b class="dishead">{{shoes.shoesDiscsss}}</b>
        <el-divider class="dish"></el-divider>
        <div v-for="(item, index) in commentReply" :key="index">
          <div>
            <span class="font" style="font-size:18px;color:#3F3F3F;">
              {{item.userUsername}}
              <span style="font-size:10px;">({{item.commentReplyTime}})</span>：
            </span>
          </div>
          <div>
            <p
              class="font"
              style="text-indent: 2em; font-size: 16px; color: #3F3F3F;"
            >{{item.commentReplyContent}}</p>
          </div>
          <el-divider></el-divider>
        </div>
      </div>
    </el-card>
  </div>
</template>
<script>
export default {
  data() {
    return {
      shoes: {},
      commentReply: [
        {
          shoesId: "dsdsd",
          commentReplyContent: "sdasdasdas",
          commentReplyTime: "2013-02-31",
          userUsername: "dsdas"
        },
        {
          shoesId: "dsdsd",
          commentReplyContent: "sdasdasdas",
          commentReplyTime: "2013-02-31",
          userUsername: "dsdas"
        }
      ]
    };
  },
  methods: {
    shoesDetailGet() {
      let that = this;
      let shoesId = that.$route.query.shoesId;
      that.$axios
        .post("/shoes/queryShoesInfoByShoesId?shoesId=" + shoesId, {})
        .then(function(response) {
          that.shoes = response.data.data;
        })
        .catch(function(error) {
          console.log(error);
        });
    },
    commentReplyGet() {
      let that = this;
      let shoesId = that.$route.query.shoesId;
      that.$axios
        .post("/commentReply/queryCommentReplysInfoList?shoesId=" + shoesId, {})
        .then(function(response) {
					that.commentReply = response.data.data.rows;
        })
        .catch(function(error) {
          console.log(error);
        });
    },
    addToShopcart() {
      let that = this;
      if (!localStorage.getItem("user")) {
        alert("你好，系统检测到未登录本网站，暂时无法执行此操作");
				that.$router.push("/login");
      } else {
        let userId = JSON.parse(localStorage.getItem("user")).userId;
        let shoesId = that.$route.query.shoesId;
        that.$axios
          .post("/shopping/shoppingRegist", {
            "shoesId": shoesId,
            "userId": userId
          })
          .then(function(response) {
						console.log(response);
						alert("你已将图书加入购物车，点击返回首页");
						that.$router.push("/");
						window.location.reload(true);
          })
          .catch(function(error) {
            console.log(error);
          });
      }
    }
  },
  created() {
    this.shoesDetailGet();
    this.commentReplyGet();
  }
};
</script>
<style scoped>
.shoesDetail {
  display: flex;
  justify-content: center;
}
.shoesCard {
  width: 640px;
}
.image {
  width: 300px;
  height: 300px;
  margin-right: 40px;
}
.detalTop {
  display: flex;
  flex-direction: row;
}
.shoesDis {
  margin-top: 40px;
}
.dishead {
  color: #f40;
  margin-left: 10px;
  font-size: 18px;
}
.font {
  color: #6c6c6c;
  font: 14px/1.5 tahoma, arial, "Hiragino Sans GB", "\5b8b\4f53", sans-serif;
}
.shoesDis .dish {
  background-color: #e6a23c;
}
.shoesDis .el-divider--horizontal {
  margin: 10px 0px;
}
</style>